<template>
  <div class="statisticc_wrapper" style="padding-bottom: 30px;">
    <!--能耗信息-->
    <div class="statistic_card">
      <div style="width:100%;background:rgba(11,25,77,0.55);line-height: 30px;">
        <div class="d-flex align-items-center justify-content-around titleMark_large  mx-auto" style="width: 320px;">
          <i class="iconfont icon-title2 mr-0 "></i>能耗信息<i class="iconfont icon-title3 mr-0"></i>
        </div>
      </div>
      <div class="statistic_card_body d-flex justify-content-between" style="padding: 17px 0 17px 0px;">
       <!-- 历史能耗-->
        <div class=" position-relative" style="width:230px;flex: none;">
          <title-mark class="ml-3" :title="'历史能耗'"></title-mark>
          <div class="float-right mr-3 position-absolute" style="right:0;z-index: 2">
            <el-button @click="historyEnergyData('year')" size="mini" :class="{active:historyEnergyType=='year'}" class="m-0 d-inline-block ur-btn ur-btn-mini">年</el-button>
            <el-button @click="historyEnergyData('month')" size="mini" :class="{active:historyEnergyType=='month'}" class="m-0 d-inline-block ur-btn ur-btn-mini">月</el-button>
            <el-button @click="historyEnergyData('day')" size="mini" :class="{active:historyEnergyType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini">日</el-button>
          </div>
          <div id="myChart1" style="height: 150px;width: 230px;" ref="echarts1" ></div>
        </div>
        <div style="flex:1 1 auto;">
          <title-mark  :title="'总能耗'"></title-mark>
          <div class=" d-flex">
            <el-button size="mini" @click="energyStatisticChart('day')" :class="{active:electricityTimeType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini w40">昨日</el-button>
            <el-button size="mini" @click="energyStatisticChart('year')" :class="{active:electricityTimeType=='year'}"  class="m-0 ur-btn d-inline-block ur-btn-mini w40">累计</el-button>
          </div>
<!--          <el-progress type="circle" :percentage="25" :show-text="false" ></el-progress>-->
          <div id="myChart2" style="height: 120px;width: 100%;margin-top: 5px;" ref="echarts2" ></div>
        </div>
      </div>
    </div>
    <!-- 统计信息 -->
    <div class="statistic_card mt-3">
      <div class="mb-3" style="width:100%;background: rgba(11,25,77,0.55);height:40px;line-height: 50px;">
        <div class="d-flex align-items-center justify-content-around titleMark_large  mx-auto" style="width: 320px;">
          <i class="iconfont icon-title2 mr-0 "></i>统计信息<i class="iconfont icon-title3 mr-0"></i>
        </div>
      </div>
      <!-- 历史能耗-->
      <div class="position-relative" >
        <title-mark class="ml-3" :title="'用电时长'"></title-mark>
        <div class=" mr-3 position-absolute" style="right:0;z-index: 2">
          <el-button @click="electricityTimeData('year')" size="mini" :class="{active:electricityTimeType=='year'}" class="m-0 d-inline-block ur-btn ur-btn-mini">年</el-button>
          <el-button @click="electricityTimeData('month')" size="mini" :class="{active:electricityTimeType=='month'}" class="m-0 d-inline-block ur-btn ur-btn-mini">月</el-button>
          <el-button @click="electricityTimeData('day')" size="mini" :class="{active:electricityTimeType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini">日</el-button>
        </div>
        <div id="myChart3" style="height: 100px;width: 100%" ref="echarts3"
        v-loading="loading[0]" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="transparent"></div>
      </div>
      <!-- 亮灯率-->
      <div class="position-relative " style="margin-top: 50px;" >
        <title-mark class="ml-3" :title="'亮灯率'"></title-mark>
        <div class="mr-3 position-absolute" style="right:0;z-index: 2">
          <el-button @click="lightRate('year')" size="mini" :class="{active:lightRateType=='year'}" class="m-0 d-inline-block ur-btn ur-btn-mini">年</el-button>
          <el-button @click="lightRate('month')" size="mini" :class="{active:lightRateType=='month'}" class="m-0 d-inline-block ur-btn ur-btn-mini">月</el-button>
          <el-button @click="lightRate('day')" size="mini" :class="{active:lightRateType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini">日</el-button>
        </div>
        <div id="myChart4" style="height: 100px;width: 100%" ref="echarts4" element-loading-customClass="myChart4"
        v-loading="loading[1]" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="transparent"></div>
      </div>
      <!-- 故障数-->
      <div class="position-relative  mb-4" style="margin-top: 50px;">
        <title-mark class="ml-3" :title="'故障数'"></title-mark>
        <div class="mr-3 position-absolute" style="right:0;z-index: 2">
          <el-button @click="troubleStatistic('year')" size="mini" :class="{active:troubleStatisticType=='year'}" class="m-0 d-inline-block ur-btn ur-btn-mini">年</el-button>
          <el-button @click="troubleStatistic('month')" size="mini" :class="{active:troubleStatisticType=='month'}" class="m-0 d-inline-block ur-btn ur-btn-mini">月</el-button>
          <el-button @click="troubleStatistic('day')" size="mini" :class="{active:troubleStatisticType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini">日</el-button>
        </div>
        <div id="myChart5" style="height: 100px;width: 100%" ref="echarts5"
        v-loading="loading[2]" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="transparent"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  import fetch from 'api/fetch'
  import echarts from 'echarts'
  import titleMark from "base/titleMark";
  import energyData from 'static/data/energyData'
  export default {
    components: {titleMark},
    props: {
      regionIds:{
        type:Array,
        default:[]
      }
    },
    data() {
      return {
        myChart: null,
        historyEnergyChart: null,
        electricityTimeChart: null,
        lightRateChart: null,
        troubleStatisticChart: null,
        historyEnergyType:'day',
        electricityTimeType:'day',
        lightRateType:'day',
        troubleStatisticType:'day',
        energyStatisticType:'day',
        loading:[false,false,false]
      }
    },
    watch: {},
    computed: {},
    methods: {
      barChart(element) {
        let myChart = echarts.init(document.getElementById(element))
        let chartOption = {
          title: {text: "", x: 'center'},
          legend: {show:false},
          tooltip: {trigger: 'axis', axisPointer: {type: 'shadow'},},
          grid:{bottom:20 , right:0, left:10,top:30},
          color:new echarts.graphic.LinearGradient(0, 0, 0, 1,
              [{offset: 0, color: '#4E2DF2'}, {offset: 1, color: '#FF3C00'}]
          ),
          xAxis: {
            type: 'category',
            splitLine: {show: false},
            axisLine: {show: false},
            axisLabel: {textStyle: {color: '#BFCFEF', fontSize: '12'}},
            data: [],
          },
          yAxis:{show:false},
          series: []
        }
        myChart.setOption(chartOption);
        // window.addEventListener("resize", () => {
        //   _this.myChart.resize()
        // })
        return myChart
      },
      setLineOptionChart(chart,formatter,xData,yData,sName,lineColor,shadowColor){
        chart.setOption({
          // formatter:'时间：{b0}<br/>用电时长：{c0}kwh'
          tooltip: {trigger: 'axis', formatter:formatter},
          xAxis:{data:xData},
          series:[{
            name: sName,type: 'line',data:yData,symbolSize: 6,symbol:'circle', smooth:false,//false实线 true圆滑
            areaStyle: {
              normal: {
                color: {x: 0, y: 0, x2: 0, y2: 1,
                  colorStops: [
                    {offset: 0, color: shadowColor[0]},
                    {offset: 0.7,color: shadowColor[1]}
                  ],
                  globalCoord: false
                }
              }
            },
            itemStyle: {
              normal: {color: lineColor}
            }
          }]
        })
      },
      energyStatisticChart(type){//总能耗
        this.electricityTimeType = type
        let chartOption = {
          title: {text: '', x: 'center'},
          tooltip: {
            show:false,
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
          },
          series: [
            {
              type: 'pie', radius: ['70%', '80%'],
              hoverAnimation:false,
              center: ["50%", "60%"],
            }
          ],
          color:[
              new echarts.graphic.LinearGradient(0, 0, 0, 1,
              [
                {offset: 0, color: '#4E2DF2'},
                {offset: 1, color: '#FF3C00'}
              ]),'#1D2045']
        }
        this.myChart = echarts.init(document.getElementById('myChart2'))
        this.myChart.setOption(chartOption)

        this.energyStatisticData(type)
      },
      energyStatisticData(type){
        this.electricityTimeType=type
        let param = this.regionIds.length ? {regionIds: this.regionIds} : {}
        api.fetchSimple('/ViewInfo/SystemEnergy', param)
            .then(r=>{
              let res=0
              if(api.ajaxServe=='http://39.100.245.87:8888/'){//三和数据
                res = type == 'day' ? r.YestodayEnergy :9872394.53
              }else{
                res = type == 'day' ? r.YestodayEnergy : r.AllEnergy
              }
              let txt= type == 'day'?'昨日':'累计'
              this.myChart.setOption({
                series: [{
                  label: {
                    normal: {
                      show: true,
                      position: 'center',
                      formatter:function (argument) {
                        var html;
                        html=res+'\r\n\r\n'+'kwh';
                        return html;
                      },
                      textStyle:{fontSize: 14, color:'#BFCFEF'}
                    }
                  },
                  data:[{ name: txt,value:res}]
                }]
              })
            })
      },
      historyEnergy(){//历史能耗
        this.historyEnergyChart=this.barChart('myChart1')
        this.historyEnergyData('day')
      },
      //历史能耗数据
      async historyEnergyData(type){
        this.historyEnergyType = type
        let param = this.regionIds.length ? {type: type, regionIds: this.regionIds} : {type: type}
        let res = await api.fetchSimple('/OverView/TotalEnergy', param)
        let data = res?res:[]
        let xDatas = [], yDatas = []
        for (let i = 0; i < data.length; i++) {
          if (type == 'year') {
            xDatas.push(api.formatDate(data[i].Date, 'yyyy'))
          } else if (type == 'month') {
            xDatas.push(api.formatDate(data[i].Date, 'yyyy-MM'))
          } else {
            if(i<data.length-1){//去掉当天
              xDatas.push(api.formatDate(data[i].Date, 'MM-dd'))
            }
          }
          //三和数据造假
          if(api.ajaxServe=='http://39.100.245.87:8888/'){
            if(type == 'month'){
              yDatas.push(energyData.monthData[i].Actual||data[i].Actual)
            }else if(type == 'year'){
              yDatas.push(energyData.yearData[i].Actual||data[i].Actual)
            }else{
              yDatas.push(data[i].Actual)
            }
          }else {
            yDatas.push(data[i].Actual)
          }
        }
        this.historyEnergyChart.setOption({
          tooltip: {
            formatter: '时间：{b0}<br/>能耗：{c0}kwh'
          },
          xAxis: {data: xDatas},
          series: [{
            name: '能耗', type: 'bar', data: yDatas, barMinHeight: 3, barMaxWidth: 8,
            itemStyle: {
              normal: {barBorderRadius: [50, 50, 0, 0]}
            }
          }]
        })
      },
      electricityTime(){//用电时长
        this.electricityTimeChart=this.barChart('myChart3')
        this.electricityTimeData('day')
      },
      //用电时长数据
      async electricityTimeData(type){
        this.electricityTimeType = type
        let param = this.regionIds.length ? {type: type, regionIds: this.regionIds} : {type: type}
        let res = await api.fetchSimple('/OverView/TotalLightingHours',param)
        let data = res? res:[]
        let xData = [], yData = []
        for (let i = 0; i < data.length; i++) {
          if (type == 'year') {
            xData.push(api.formatDate(data[i].Date, 'yyyy'))
          } else if (type == 'month') {
            xData.push(api.formatDate(data[i].Date, 'yyyy-MM'))
          } else {
            xData.push(api.formatDate(data[i].Date, 'MM-dd'))
          }
          yData.push(data[i].Hours.toFixed(2))
        }
        let formatter = '时间：{b0}<br/>用电时长：{c0}h'
        let shadowColor = ['rgba(119,219,244,0.5)', 'rgba(119,219,244,0)']
        this.setLineOptionChart(this.electricityTimeChart, formatter, xData, yData, '能耗', '#1FC0E6', shadowColor)
      },
      async lightRate(type){//亮灯率
        this.lightRateType = type
        this.$set(this.loading, 1, true)
        if (this.lightRateChart) {
          this.lightRateChart.dispose()
        }
        this.lightRateChart = this.barChart('myChart4')
        let param = this.regionIds.length ? {type: type, regionIds: this.regionIds} : {type: type}
        let res = await api.fetchSimple('/OverView/TotalLightingPercent', param)
        let data = res
        if (data) {
          this.$set(this.loading, 1, false)
          let xData = [], yData = []
          for (let i = 0; i < data.length; i++) {
            xData.push(fetch.getDate(type, data[i].Date))
            //济南市章丘 造数据
            if(['2020-08-01 00:00:00','2020-08-08 00:00:00','2020-08-09 00:00:00'].includes(data[i].Date)){
              yData.push(100)
            }else{
              yData.push(data[i].Value)
            }
          }
          let formatter = '时间：{b0}<br/>亮灯率：{c0}%'
          let shadowColor = ['rgba(244,205,119,0.5)', 'rgba(244,205,119,0)']
          this.setLineOptionChart(this.lightRateChart, formatter, xData, yData, '亮灯率', '#E69F1F', shadowColor)
        }
      },
      async troubleStatistic(type){//故障数
        this.troubleStatisticType = type
        this.$set(this.loading, 2, true)
        if (this.troubleStatisticChart) {
          this.troubleStatisticChart.dispose()
        }
        this.troubleStatisticChart = this.barChart('myChart5')
        let param = this.regionIds.length ? {type: type, regionIds: this.regionIds} : {type: type}
        let res = await api.fetchSimple('/OverView/TotalFaultCount', param)
        let data = res
        if (data) {
          this.$set(this.loading, 2, false)
          let xData = [], yData = []
          for (let i = 0; i < data.length; i++) {
            xData.push(fetch.getDate(type, data[i].Date))
            yData.push(data[i].Value)
          }
          let formatter = '时间：{b0}<br/>故障数：{c0}'
          let shadowColor = ['rgba(231,87,146,0.5)', 'rgba(231,87,146,0)']
          this.setLineOptionChart(this.troubleStatisticChart, formatter, xData, yData, '故障数', '#E61F51', shadowColor)
        }
      },
    },
    created() {
    },
    mounted() {
      this.historyEnergy()
      this.energyStatisticChart('day')
      this.electricityTime()
      this.troubleStatistic('day')
      this.lightRate('day')
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .statistic_card_body{width:400px; height:172px; background:rgba(1,0,37,0.6);}
  .el-loading-spinner i,.el-loading-spinner .el-loading-text{color:#BFCFEF !important;}
</style>
